<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div v-if="value">
        <Modal v-model="uploadModalSwitch"
               width="100%" :styles="uploadModalStyle"
               :title="serviceName"
               :mask-closable="false"
               @cancel="closeModalAction"
               @on-cancel="closeModalAction"
               :footerHide="true">
            <!--上传文件分为三个步骤-->
            <upload-steps-index
                :businessCode="businessCode"
                :currentStepNumber="currentStep"
                :serverUrl="serverUrl"
                @close-modal="closeModalAction"
            ></upload-steps-index>
        </Modal>
    </div>
</template>

<script>
    import uploadStepsIndex from "./uploadStepsIndex.vue"
    import Ajax from '../../js/Ajax/index.js'

    var STEP_STATUS = {
        "1": "first",
        "2": "second",
        "3": "third",
    };

    Ajax.init({
        baseUrl: "",          // 是否设置 http(s)://***.com/, 即 http_origin，默认为空
        apiList: {},    // http请求地址的字典型
         checkToken: false     // 是否在每个请求的头部设置token，默认为true
    });
    var getData = Ajax.methods;

    export default {
        props:{
            // server URL
            serverUrl: {
                type: String,
                default: ''
            },
            // 业务码，必传且是字符串
            businessCode: {
                type: String,
                required: true
            },
            // 是否显示模态框
//            modalSwitch: {
            value: {
                type: Boolean,
                default: true
            },
        },
        // 加载控件触发的事件
        mounted: function () {

        },
        data: function () {
            return {
                // 上传文件模态框的开关
                uploadModalSwitch: false,
                // 模态框的样式
                uploadModalStyle: {
                    // 最大宽度
                    "max-width" : "1200px"
                },
                currentStep: STEP_STATUS["1"], //默认是显示第一步 first,second, third
                serviceName:'',
            };
        },
        methods: {
            initAction: function(){
                var that = this;
                //发送ajax请求获取业务的信息
                getData.getUrl(this.serverUrl + '/cpsFimBusiness/findCpsByBussCode/' + this.businessCode).then(function (res) {
                    // 业务名称，影响到模态框的标题
                    that.serviceName = res.data.data.businessName;
                    // 业务码，与传入的参数是一致的
                    that.businessCode = res.data.data.businessCode;
                });
                this.uploadModalSwitch = this.value;
            },
            // 关闭窗口
            closeModalAction: function () {
                this.uploadModalSwitch = false;
                this.$emit("input",false);
            },
        },
        watch: {
            // 监听使用组件开关，如果为false ,则关闭窗口，如果为true,则显示窗口
            value: function (newValue, oldValue) {
                this.uploadModalSwitch = newValue;
                if(newValue){
                    this.initAction();
                }
            },
        },
        components:{
            uploadStepsIndex
        }
    }
</script>

<style scoped lang="scss">

</style>
